<template>
  <div>
    <!-- 操作对象 -->
    <p @click="user.age++">{{ user.name }}--{{ user.age }}</p>
    <hr />
    <!-- 操作数组 -->
    <ul>
      <li v-for="item in nameArr" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="addMonsterFn">添加怪兽</button>
    <hr />
    <!-- 操作基本数据类型 -->
    <p @click="num++">{{ num }}</p>
  </div>
</template>

<script>
// 使用 reactive 实现定义响应式数据
// 语法:  const  变量 = reactive(初始值)
// 原理 : 使用proxy 代理对象, 实现对代理对象的属性的操作, 监听代理对象的属性变化, 实现修改原对象属性


// ref 和reactive 的区别
// 01: reactive定义响应式数据 只能定义引用数据类型, 不能定义基本数据类型
// ref 可以定义任意数据类型

// 02: 原理上的区别: ref 使用Object.definePeoperty 实现的响应式, 
// reactive 使用的是proxy 代理 实现的响应式

// 03:  ref 在处理引用数据类型的时候, 还是借助了Proxy 实现的响应式, 处理基本数据类型的使用
// 使用的是 Object.defineProperty



import { reactive, ref } from 'vue'

export default {
  setup() {
    // 01: 定义对象
    const user = reactive({ name: '小强', age: 1 })
    console.log('user', user);

    // 02: 操作数组
    const nameArr = reactive([{
      id: 1,
      name: '艾雷王'
    }, {
      id: 2,
      name: '巴尔塔'
    }])

    // console.log('nameArr', nameArr);
    const addMonsterFn = () => {
      nameArr.push({
        id: nameArr[nameArr.length - 1].id + 1,
        name: '哥斯拉'
      })
    }

    // 03: 操作number
    const num = 100
    console.log(num);

    // 04: 使用ref 处理对象
    const girlStar = ref({
      name: '高圆圆',
      age: 40
    })

    console.log('girlStar', girlStar);
    return {
      user,
      nameArr,
      addMonsterFn,
      num
    }
  }
}
</script>
<style scoped></style>